<template>
	<div class="middle" id="middle">
		<div class="middlebg"></div>
		<div class="top">
			<el-row class="topHeader" v-model="message">
				<el-col :span="4">
					<span>班级：<span class="content">{{message.class}}</span></span>
				</el-col>
				<el-col :span="3">
					<span>学生人数：<span class="content">{{message.count}}</span></span>
				</el-col>
				<el-col :span="11">
					<span>项目：<span class="content">{{message.course_name}}</span></span>
				</el-col>
				<el-col :span="3">
					<div class="grid-content bg-purple-light screen" @click.prevent="handleFullScreen">
						<el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom">
					    <span class="el-icon-rank icon"></span>
					  </el-tooltip>
					</div>
				</el-col>
				<el-col :span="2">
					<span class="back" @click="back">返回</span>
				</el-col>
			</el-row>
		</div>
		<div class="main">
      <div class="center" v-model = "student">
        <div class="rectangle" :id="it.id+b" v-for="(it,index) in student" :key="it.index">
          <div class="name">{{it.stu_name}}</div>
          <span class="img">❤</span>
          <span class="num" :id="it.id">0</span>
        </div>
      </div>
		</div>
	</div>
</template>

<script>
  import md5 from 'js-md5'
	export default {
		data(){
			return {
				b:'_b',
				fullscreen:false,
				havingClassId:'',//echarts传来的正在上课id
        class_id:'',//echarts传来的正在上课id
				id:'',//获取到的地址栏id
				message:[],//头部信息
				heart_rate:'',//心率
				timer:null,//定时器
				student:'',//全班学生
				className:'',
				hrart:[],
        teacher_id:'',

        websock: null,
        name:'',//路由名字
        pwd:'',//随机15位数
        time:'',//当前时间戳
			}
		},
		methods:{
			//返回上一页
			back(){
				this.$router.push({name:'echarts'})
			},
			//全屏功能
			handleFullScreen(){
				let element = document.getElementById('middle');
				if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
			    }
        } else if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
              // IE11
            element.msRequestFullscreen();
        }
				this.fullscreen = !this.fullscreen;
			 },
			 //获取班级信息
			 getClassInfo(){
				 this.id = this.$route.query.id
         this.teacher_id = this.$route.query.teacher_id
         this.$http.post('/api/dynamic_heart_rate/classInfo',{
					class_id:this.id,
					class_record_id:this.havingClassId,
          teacher_id:this.teacher_id,
				}).then(res=>{
					this.message = res.data.data
				})
			 },
			 //获取班级学生信息
			getStudentInfo(){
			  this.teacher_id = this.$route.query.teacher_id
				this.$http.post('/api/dynamic_heart_rate/getStudentInfo',{
					class_id:this.id,
          teacher_id:this.teacher_id,
				}).then(res=>{
					this.student = res.data.data
				})
			},
      randomString(len =15) {
        //len = len || 15;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = $chars.length;
        var pwd = '';
        for (var i = 0; i < len; i++) {
          pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        this.pwd = pwd
      },
      getTime(){
        this.time = Math.round(new Date().getTime()/1000).toString()
      },
      getName(){
        this.name = this.$route.name
      },
      threadPoxi(){  // 实际调用的方法
        //参数
        // var agentData =md5(this.name+this.pwd+this.time);
        //若是ws开启状态
        if (this.websock.readyState === this.websock.OPEN) {
          this.websocketsend(agentData)
        }
        // 若是 正在开启状态，则等待300毫秒
        else if (this.websock.readyState === this.websock.CONNECTING) {
          let that = this;//保存当前对象this
          setTimeout(function () {
            that.websocketsend(agentData)
          }, 300);
        }
        // 若未开启 ，则等待500毫秒
        else {
          this.initWebSocket();
          let that = this;//保存当前对象this
          setTimeout(function () {
            that.websocketsend(agentData)
          }, 500);
        }
      },
      initWebSocket(){ //初始化weosocket
        //ws地址
        const wsuri = "ws://39.105.192.86:3000";
        // const wsuri = "ws://192.168.1.107:8282";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
        this.websock.onopen = this.websocketsend;
      },
      websocketonmessage(e){ //数据接收
       // console.log(e.data)
        const redata = JSON.parse(e.data);
        if(redata.type) {
          this.$notify({
            title: '提示',
            type:'error',
            message:'心率预警学生:'+redata.student_name,
            duration: 0
          })
        }
        if(redata.heart_rate == 0){
          $('#'+redata.student_id+this.b).css("background","#ccc")
        }else if(redata.heart_rate >= 1 && redata.heart_rate <=90) {
          $('#'+redata.student_id+this.b).css("background","#00b02d")
        }else if (redata.heart_rate > 90 && redata.heart_rate <=140) {
          $('#'+redata.student_id+this.b).css("background","#f0c92c")
        }else if (redata.heart_rate > 140 && redata.heart_rate <=180){
          $('#'+redata.student_id+this.b).css("background","#ff9900")
        }else if (redata.heart_rate >=180){
          $('#'+redata.student_id+this.b).css("background","#ff0000")
        }
        $('#'+redata.student_id).html(redata.heart_rate)
      },
      websocketsend(){//数据发送
        var obj = {
          token:md5(this.name+this.pwd+this.time),
          name:this.name,
          skin:this.pwd,
          time:this.time,
          pc:this.class_id+"_"+this.havingClassId
        }
        this.websock.send(JSON.stringify(obj));
      },
      websocketclose(e){  //关闭
			  this.initWebSocket()
        //console.log("connection closed (" + e.code + ")");
      },
		},
		created(){
			this.havingClassId = localStorage.getItem('havingClassId')
			this.class_id = localStorage.getItem('class_id')
			this.getClassInfo()
			this.getStudentInfo()
      this.initWebSocket()
      this.getName()
      this.randomString(15)
      this.getTime()
		},
		destroyed(){
			clearInterval(this.timer)
      //页面销毁时关闭长连接
      this.websocketclose();
		}

	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: #555;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #000;
		position: relative;
		span {
			color: #fff;
			padding-left:3.125rem;
			.content {
				color: #00b02d;
				font-weight: 500;
				padding-left:0;
			}
		}
		.back {
			position: absolute;
			right: 0;
			background: #00b02d;
			padding: 0 25px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.main {
		padding: 1.25rem 0;
		.center {
			float: left;
			display: flex;
			.rectangle {
				width: 9rem;
				height: 6.25rem;
				background: #ccc;
				position: relative;
				margin: 0.875rem;

				.name {
					font-size: 1rem;
					height: 1.875rem;
					line-height: 1.875rem;
					width: 100%;
					text-align: center;
					background:rgba(0, 0, 0, .5);
					color: #fff;
				}
				.img {
					position: absolute;
					bottom: 0.2rem;
					left: 0.625rem;
					font-size: 1.5rem;
					color: #ff0000;
				}
				.num {
					font-size: 2.5rem;
					color: #fff;
					position: absolute;
					bottom: 0rem;
					right: 1.875rem;
				}
			}
		}

	}
</style>
